<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>xiaojiu</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			body{
				font-family: "楷体";
				background: #000;
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.xiaojiu{
				width: 100%;
				font-size: 30px;
				position: fixed;
				top: 0;
				color: #fff;
			}
			.one{
				border: 1px solid #fff;
				text-align: center;
				box-shadow: 0px 0px 12px #fff;
				border-radius: 5px 5px;
			}
			.one h1,.one h5,.one p{
				padding: 15px;
				font-size: 25px;
				border-bottom: 1px solid #fff;
				color: #f6a4ffe0;
				box-shadow: 0px 0px 12px #fff;
				font-weight: 100;
			}
			.one input,.one select{
				text-align: center;
				height: 40px;
				width: 80px;
				font-size: 24px;
				font-family: "楷体";
				border-radius: 5px 5px;
				outline: none;
			}
			.one input:focus,.one select:focus{
				/*border-radius: 5px 5px;*/
				border: 1px solid #ff00b1bf;
				box-shadow: 0px 0px 12px #ff00b1bf;
			}
			.one button{
				outline: none;
				margin: 10px;
				padding: 5px 10px;
				font-size: 25px;
				font-family: "楷体";
				color: #111;
				border-radius: 15px 0px;
				
					
			}
			.one button:active{
				box-shadow: 0px 0px 12px #ff00b1bf;
			}
			@media (max-width: 678px) {
				.one{
					width: 90%;
				}
				.one input,.one select{
					width: 20%;
				}
				.xiaojiu{
					/*width: 100%;*/
					font-size: 30px;
					position: fixed;
					top: 0;
					color: #fff;
				}
				.one h1,.one h5,.one p{
					color: #fff;
				}
			}
		</style>
	</head>
	<body>
		<a href="http://sighttp.qq.com/msgrd?v=1&uin=2968346697" class="xiaojiu">
			<marquee>点击我联系小玖！</marquee>
		</a>
		<div class="one">
			<h1>四则运算器</h1>
			<h5>不可以找bug！因为都是bug！</h5>
			<p>
				<input type="text" id="one" placeholder="数值1"/>
				<!--<input id="cd" value="" placeholder="运算符"/>-->
				<select id="cd" name="">
					<option value="+">+</option>
					<option value="-">-</option>
					<option value="*">*</option>
					<option value="/">/</option>
				</select>
				<input type="text" id="two" placeholder="数值2"/>
				=
				<input type="text" id="eace" value="" placeholder="结果"/>
				<!--余
				<input type="text" id="three"/>-->
				
			</p>
			<button onclick="col(1)">重新开始</button>
			<button onclick="col(0)">检查</button>
		</div>
		<script>
			alert("您已进入未知区域！");

			function col(n){
				var one = document.querySelector("#one").value;
				var two = document.querySelector("#two").value;
				var eace = document.querySelector("#eace").value;
				var cd = document.querySelector("#cd").value;
				var result = 0;
				if(n == 0){
					if( cd == "+" ){
						result=Number(one)+Number(two);
						if(eace == Number(one)+Number(two)){
							alert("回答正确！");
						}else{
							alert("回答错误！正确答案为" + result);
						}
					}
					if( cd == "-" ){
						result=Number(one)-Number(two);
						if(eace == Number(one)-Number(two)){
							alert("回答正确！");
						}else{
							alert("回答错误！正确答案为" + result);
						}
					}
					if( cd == "*" ){
						result=Number(one)*Number(two);
						if(eace == Number(one)*Number(two)){
							alert("回答正确！");
						}else{
							alert("回答错误！正确答案为" + result);
						}
					}
					if( cd == "/" ){
						result=Number(one)/Number(two);
						sec = Number(one)%Number(two);
						if(Number(two)==0){
							alert("0不可以做除数！");
						}
						if(document.querySelector('#eace').value == parseInt(result)){
							if(Number(one)%Number(two)==0){
								alert("回答正确!");
							}else{
								alert("回答正确！还余" + sec);
							}
						}else{
							alert("回答错误！正确答案为" + parseInt(result) + ",还余" + sec);
						}
					}
				}
				if(n == 1){
					document.querySelector("#one").value = '';
					document.querySelector("#two").value = '';
					document.querySelector("#eace").value = '';
				}
			}
		</script>
	</body>
</html>
